<template>
    <div class="bc-date" v-clickoutside='hide'>
        <!-- <div class="date-input" @click.stop="toggleMenu" ref="reference"> -->
        <div class="date-input" ref="reference">
            <span class="date-icon">
                <i class="bc-icon icon-bc-calendar"></i>
            </span>
            <input :value="formateDate" @focus="toggleMenu" class="date-input__inner" readonly placeholder="请选择日期" />
        </div>
        <transition name="bc-select-menu-fade">
            <div class="bc-date-pannel bc-date-triangle bc-date-bottom-start" 
                v-dom-portal="domPortal" :style="posStyle" v-show="isShowPanel">
                <div class="pannel-nav">
                    <span @click="handlerChangeYear(-1)"><bc-icon name="bc-arrows-left" /></span>
                    <span @click="handlerChangeMonth(-1)"><bc-icon name="bc-arrow-left" /></span>
                    <div class="pannel-selected">
                        <span>{{formateDate.split('-')[0]}}年</span>
                        <span>{{formateDate.split('-')[1]}}月</span>
                        <span>{{formateDate.split('-')[2]}}日</span>
                    </div>
                    <span @click="handlerChangeMonth(1)"><bc-icon name="bc-arrow-right" /></span>
                    <span @click="handlerChangeYear(1)"><bc-icon name="bc-arrows-right" /></span>
                </div>
                <div class="pannel-content">
                    <ul class="pannel-content__title">
                        <li v-for="i in weeksList" :key="i">{{i}}</li>
                    </ul>
                    <ul class="pannel-content__item" v-for="i in 6" :key="i">
                        <li v-for="j in 7" :key="j"
                            @click="handlerActiveDay(getVisibleDaysIndex(i,j,true))"
                            :class="{
                                'active-date': getVisibleDaysIndex(i,j).active,
                                'read-only': getVisibleDaysIndex(i,j).readOnly
                            }"
                        >{{getVisibleDaysIndex(i,j).day}}</li>
                    </ul>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import clickoutside from "@/assets/js/clickoutside";
import { getYMD, getDayCountOfMonth } from '@/assets/js/handle-date.js'
export default {
    name: 'BcDatePicker',
    props: {
        value: {
            type: Date,
            default: () => new Date()
        },
        domPortal: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        formateDate() {
            let { year, month, day } = getYMD(this.value),
                result = `${year}-${month + 1}-${day}`;
            return result;
        },
        posStyle() {
            if (this.domPortal) {
                let scrollTop = document.documentElement.scrollTop;
                return {
                    'left': this.pos.left + 'px',
                    'top': scrollTop + this.pos.top + this.pos.height + 12 + 'px',
                    'z-index': 200
                }
            } else {
                return {
                    'left': 0,
                    'top': this.pos.height + 12 + 'px',
                    'z-index': 200
                }
            }
        }
    },
    data() {
        return {
            pos: {
                left: 0,
                top: 0,
                height: 36
            },
            isShowPanel: false,
            weeksList: ['日', '一', '二', '三', '四', '五', '六']
        }
    },
    directives: { clickoutside },
    methods: {
        hide() {
            console.log('ssss')
            this.isShowPanel = false
        },
        toggleMenu () {
            // this.isShowPanel=!this.isShowPanel;
            this.isShowPanel=true;
            this.getPostion();
        },
        getPostion () {
            const pos = this.$refs.reference.getBoundingClientRect();
            const {left, top, height} = pos;
            this.pos = {left, top, height};
        },
        getVisibleDaysIndex(i, j, type) {
            i = i - 1;
            j = j - 1;
            let index = i * 7 + j;
            return type ? index : this.visibleDays()[index];
        },
        visibleDays() {
            let result = [],
                { year, month } = getYMD(this.value),
                // new Date()里接受month是以0开头的
                dayOffset = new Date(year, month, 1).getDay(),
                daysOfMonth = getDayCountOfMonth(year, month),
                perviousMonth = month - 1;
            if (perviousMonth === 0) {
                year--;
                perviousMonth = 12;
            }
            let daysOfLastMonth = getDayCountOfMonth(year, perviousMonth);
            this.getDayList(
                dayOffset, daysOfMonth, daysOfLastMonth, result);
            return result;
        },
        getDayList(dayOffset, daysOfMonth, daysOfLastMonth, result) {
            // 处理上个月的日期
            for (let i=0;i<dayOffset;i++) {
                result.unshift({ day: (daysOfLastMonth - i), readOnly: true });
            }
            // 处理当月的天数
            let day = getYMD(this.value).day;
            for (let i=1;i<=daysOfMonth;i++) {
                let obj = { day: i, active: true }
                if (day !== i) {
                    obj.active = false;
                }
                result.push(obj);
            }
            // 总数减去已使用的数，把剩余空间填满
            let len = 42 - result.length;
            for (let i=1;i<=len;i++) {
                result.push({day: i, readOnly: true});
            }
        },
        handlerActiveDay(index) {
            let result = this.visibleDays()[index],
                { year, month } = getYMD(this.value);
            if (!result.readOnly) {
                this.$emit('input', new Date(year, month, result.day));
            }
        },
        handlerChangeYear(n) {
            let { year, month } = getYMD(this.value);
            year += n;
            this.$emit('input', new Date(year, month, 1));
        },
        handlerChangeMonth(n) {
            let { year, month } = getYMD(this.value);
            month += n;
            this.$emit('input', new Date(year, month, 1));
        }
    }
}
</script>

<style scoped>
.bc-date {
    position: relative;
    display: inline-block;
}
.bc-date>.date-input {
    position: relative;
    display: inline-block;
    font-size: 14px;
}
.bc-date>.date-input>.date-icon {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.bc-date>.date-input>.date-input__inner {
    display: inline-block;
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 15px;
    outline: none;
    font-size: inherit;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 4px;
    cursor: pointer;
    padding-left: 30px;
}
.bc-date>.date-input>.date-input__inner:focus {
    border: 1px solid #2d8cf0;
}
.bc-date-pannel {
    position: absolute;
    width: 280px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 7px;
    background-color: #fff;
}
.bc-date-pannel .pannel-nav {
    display: flex;
    align-items:center;
    justify-content: space-between;
    padding: 6px 0;
    box-shadow: 0 2px 2px 2px #f5f7fa;
}
.bc-date-pannel .pannel-nav>span {
    cursor: pointer;
}
.bc-date-pannel .pannel-nav>span:hover {
    color: #2d8cf0;
}
.bc-date-pannel .pannel-content {
    padding: 6px 0;
    box-shadow: 0 2px 2px 2px #f5f7fa;
}
.bc-date-pannel .pannel-content ul {
    list-style: none;
    display: flex;
    border-bottom: 1px solid #bbb;
}
.bc-date-pannel .pannel-content ul li {
    flex: 1;
    text-align: center;
    height: 34px;
    line-height: 34px;
    cursor: pointer;
}
.bc-date-pannel .pannel-content .pannel-content__item .read-only {
    color: #bbb;
    transform: scale(.8);
}
.bc-date-pannel .pannel-content .pannel-content__item li:not(.read-only):hover {
    transform: scale(1.1);
    color: #fff;
    background-color: #409eff;
    border-radius: 6px;
    transition: all .2s;
}
.bc-date-pannel .pannel-content .active-date {
    color: #fff;
    background-color: #409eff;
    border-radius: 6px;
}
.bc-date-triangle::after {
    content: '';
    position: absolute;
    border: 6px solid white;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}
.bc-date-triangle::before {
    content: '';
    position: absolute;
    border: 6px solid rgb(172,172,172);
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}
.bc-date-bottom-start::before {
    top: -12px;
    border-bottom-color: #000;
    left: 20px;
}
.bc-date-bottom-start::after {
    top: -11px;
    border-bottom-color: #fff;
    left: 20px;
}
</style>